<template>
  <div class="borderDiv">
    <div>
      <img style="margin-top: 2px; width: 40px" src="../assets/poem1.jpg" />
    </div>
    <div style="display: flex; margin: 13px 0 0 10px">
      <div
        class="title"
        :class="{ titleSelected: valueSelected == 0 }"
        @click="selectValue(0)"
      >
        诗文
      </div>
      <div
        class="title"
        :class="{ titleSelected: valueSelected == 1 }"
        @click="selectValue(1)"
      >
        诗课
      </div>
      <div
        class="title"
        :class="{ titleSelected: valueSelected == 2 }"
        @click="selectValue(2)"
      >
        诗音
      </div>
      <div
        class="title"
        :class="{ titleSelected: valueSelected == 3 }"
        @click="selectValue(3)"
      >
        诗斋
      </div>
    </div>

    <div style="margin-left: 600px">
      <a-popover trigger="click" placement="top">
        <template #content>
          <div v-if="isEditing">
            <div
              style="
                padding-top: 0px;
                display: flex;
                /* width: 200px; */
                /* height: 50px; */
                margin-left: 4%;
              "
            >
              <a-upload
                v-model:file-list="fileList"
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                @change="handleChange"
              >
                <img
                  v-if="imageUrl"
                  :src="imageUrl"
                  alt="avatar"
                  style="width: 104px; height: 104px"
                />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
              <div style="margin-left: 10px; width: 80%">
                <div style="font-size: 14px">
                  <a-input
                    placeholder="用户名"
                    v-model:value="newMyDetail.userName"
                    style="width: 150px"
                  >
                    <template #prefix>
                      <img
                        src="/images/user2.png"
                        style="width: 20px; margin-right: 5px"
                      />
                    </template>
                  </a-input>
                </div>
                <div style="font-size: 14px; margin-top: 5px">
                  <a-input
                    placeholder="性别"
                    v-model:value="newMyDetail.sex"
                    style="width: 150px"
                  >
                    <template #prefix>
                      <img
                        src="/images/sex.png"
                        style="width: 18px; margin-right: 2px"
                      />
                    </template>
                  </a-input>
                </div>
                <div style="font-size: 14px; margin-top: 5px">
                  <a-input
                    placeholder="职业"
                    v-model:value="newMyDetail.occupation"
                    style="width: 150px"
                  >
                    <template #prefix>
                      <img
                        src="/images/occupation.png"
                        style="width: 17px; margin-right: 3px"
                      />
                    </template>
                  </a-input>
                </div>
              </div>
            </div>
            <div style="font-size: 12px; margin-top: 6px">
              <a-textarea
                placeholder="个人简介"
                :maxlength="100"
                v-model:value="newMyDetail.briefIntroduction"
              />
            </div>
            <div style="display: flex; margin-top: 15px">
              <button class="cancelBtn" @click="canChange">取消</button>
              <button class="submitBtn" @click="submitChange">确定</button>
            </div>
          </div>
          <div v-else>
            <div
              style="
                padding-top: 0px;
                display: flex;
                /* width: 200px; */
                /* height: 50px; */
                margin-left: 4%;
              "
            >
              <img
                style="width: 45px; height: 45px; border-radius: 50%"
                :src="head_img"
                alt=""
              />
              <div style="margin-left: 10px; width: 80%">
                <div style="font-size: 14px; margin-top: 2px">
                  {{ authorDetail.userName }}
                </div>
                <div style="font-size: 12px; color: #999; margin-top: 3px">
                  {{ authorDetail.sex + " | " + authorDetail.occupation }}
                </div>
              </div>
              <div @click="clickEdit">
                <img
                  style="
                    width: 15px;
                    height: 15px;
                    margin-top: 5px;
                    cursor: pointer;
                  "
                  src="/images/edit.png"
                  alt=""
                />
              </div>
            </div>
            <div style="font-size: 12px; margin-top: 6px">
              {{ authorDetail.briefIntroduction }}
            </div>
          </div>
        </template>
        <img class="personHead" :src="head_img" />
      </a-popover>
    </div>
    <div class="title" style="margin-top: 13px" @click="selectValue(5)">
      退出
    </div>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  name: "Header",
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  data() {
    return {
      newMyDetail: {},
      authorDetail: {},
      uid: this.$store.state.id,
      head_img: "",
      valueSelected: 0,
      isEditing: false,
      fileList: [],
      loading: false,
      imageUrl: "",
    };
  },

  methods: {
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }

      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url) => {
          this.imageUrl = base64Url;
          this.loading = false;
          console.log(this.imageUrl);
        });
      }

      if (info.file.status === "error") {
        this.loading = false;
        // message.error("图片选择失败");
      }
    },
    selectValue(value) {
      console.log("选择标题le---", value);
      this.valueSelected = value;
      console.log(value);
      if (value == 0) {
        this.$router.push({ name: "PoemHome", params: {} });
      } else if (value == 1) {
        this.$router.push({ name: "Class", params: {} });
      } else if (value == 2) {
        this.$router.push({ name: "shiyin", params: {} });
      } else if (value == 3) {
        this.$router.push({ name: "Forum", params: {} });
      }
      if (value == 5) {
        this.$router.push({ name: "Login", params: {} });
      }
    },
    clickEdit() {
      console.log("点了编辑");
      this.isEditing = true;
    },
    canChange() {
      this.isEditing = false;
    },
    async submitChange() {
      try {
        let res = await this.$axios.post("/user/update", this.newMyDetail);
        console.log("修改个人信息成功---", res.data.data);
        if (this.fileList.length > 0) {
          let formData = new FormData();
          formData.append("head", this.fileList[0].originFileObj);
          formData.append("id", this.uid);
          let h_res = await this.$axios.post("/user/uploadHead", formData);
          console.log(this.uid);
          console.log("修改头像成功---", h_res.data.data);
          this.head_img =
            "http://47.108.176.163:7777/img_user_head/" +
            this.uid +
            ".png" +
            "?time=" +
            new Date().getTime();
          this.imageUrl = this.head_img;
        }
        this.authorDetail.userName = this.newMyDetail.userName;
        this.authorDetail.sex = this.newMyDetail.sex;
        this.authorDetail.occupation = this.newMyDetail.occupation;
        this.authorDetail.briefIntroduction =
          this.newMyDetail.briefIntroduction;
        this.isEditing = false;
        message.success("修改个人信息成功");
      } catch (error) {
        console.log(error);
      }
    },
  },
  async mounted() {
    this.head_img =
      "http://47.108.176.163:7777/img_user_head/" +
      this.uid +
      ".png" +
      "?time=" +
      new Date().getTime();
    try {
      let res = await this.$axios.get("/user/selectOneById?id=" + this.uid);
      let t_user = res.data.data;
      let Detail = {
        briefIntroduction: t_user.briefIntroduction,
        id: t_user.id,
        occupation: t_user.occupation,
        sex: t_user.sex,
        userName: t_user.userName,
      };
      // this.newMyDetail = JSON.parse(JSON.stringify(Detail));
      this.authorDetail = $.extend(true, {}, Detail);
      this.newMyDetail = $.extend(true, {}, Detail);
      this.imageUrl = this.head_img;
    } catch (error) {
      console.log(error);
    }
  },
};
</script>
<style scoped>
.borderDiv {
  display: flex;
  background-color: #fff;
  height: 45px;
  box-shadow: 02px 0px 5px 0px #ddd;
  padding: 0 18% 0 18%;
}
.title {
  font-size: 13px;
  margin: 0 10px 0 10px;
  color: #888;
}
.titleSelected {
  color: #000;
  font-weight: bold;
  border-bottom: 4px solid rgb(0, 126, 252);
}
.title:hover {
  color: black;
  cursor: pointer;
}
.personHead {
  border-radius: 50%;
  margin-top: 5px;
  width: 34px;
  height: 34px;
}
.personHead:hover {
  cursor: pointer;
}
.cancelBtn {
  padding: 5.5px 20px;
  color: rgb(65, 132, 241);
  border: rgb(65, 132, 241) solid 1px;
  background-color: #fff;
  font-size: 13px;
  border-radius: 3px;
  width: 30%;
  margin-bottom: 10px;
  margin-right: 10%;
}
.submitBtn {
  padding: 5.5px 20px;
  color: #ffffff;
  background-color: rgb(65, 132, 241);
  border: none;
  font-size: 13px;
  border-radius: 3px;
  width: 60%;
  margin-bottom: 10px;
}
</style>
